import Vue from 'vue'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

import '@/icons' // icon
import '@/permission' // permission control

// import pageTools from '@/components/pageTools'
// Vue.component('pageTools', pageTools)
import component from './components'
Vue.use(component)

// 全局变颜色
import '@/styles/element-variables.scss' // global css
// import moment from 'moment'
// // Vue.filter('过滤器名字',过滤器方法)
// Vue.filter('formatterTime', (val, str) => {
//   return moment(val).format(str)
// })

import * as filter from '@/filter'
Object.keys(filter).forEach((item) => {
  Vue.filter(item, filter[item])
})

// import '@/directives'

//  优化手段:批量注册（可以将一个模块中的全部的按需导出，都导入进来）
// '*'表示所有模块， * 又是一个关键字，需要改名
import * as directives from '@/directives'

// console.log(directives)

// for (const key in directives) {
//   Vue.directive(key, directives[key])
// }

// Object.keys(obj) 遍历对象，批量注册
// 工作时遍历对象，会发现：先拿到对象的所有的键，
// 按照工作需求处理（排序，过滤···），最终按照需求遍历
Object.keys(directives).forEach((item) => {
  Vue.directive(item, directives[item])
})

// set ElementUI lang to EN
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
Vue.use(ElementUI)

import Print from 'vue-print-nb'
Vue.use(Print)

import i18n from '@/lang'

Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})
// // 注册全局的自定义指令
// // 统一处理图片加载失败的情况
// Vue.directive('imgerror', {
//   inserted(el, binding) {
//     // el 指令所在的元素
//     // binding: 指令相关的信息对象，binding.value: 指定的值
//     // onerror 可以捕获到图片加载失败
//     el.onerror = function () {
//       // el.src = 默认图片
//       el.src = binding.value
//     }
//   }
// })

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: (h) => h(App)
})
